<template>
  <div class="w-960px h-[fit-content] flex flex-col">
    <h1 class="mt-40px text-24px font-bold text-#333333">我的关注</h1>
    <div class="mt-24px w-960px border-b border-#E6E6E6 flex flex-row">
      <div
        :class="[
          'flex flex-col w-[fit-content] cursor-pointer',
          selectTag === 'follow' && 'active text-#6B39FF'
        ]"
        @click="handleClick('follow')"
      >
        <div class="text-18px font-bold">关注</div>
        <!-- <div class="mt-12px h-4px bg-#6B39FF"></div> -->
      </div>
      <div
        :class="[
          'ml-82px flex flex-col w-[fit-content] cursor-pointer',
          selectTag === 'fans' && 'active text-#6B39FF'
        ]"
        @click="handleClick('fans')"
      >
        <div class="text-18px font-bold">粉丝</div>
      </div>
    </div>
    <template v-if="selectTag === 'follow'"> <Container :type="selectTag" /> </template>
    <template v-else> <Container :type="selectTag" /> </template>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Container from './components/user-container.vue'
const selectTag = ref('follow')
const handleClick = (tag) => {
  selectTag.value = tag
}
</script>
<style lang="less" scoped>
.active::after {
  content: '';
  margin-top: 12px;
  height: 4px;
  background-color: #6b39ff;
}
</style>
